import React from "react";
import { storiesOf } from "@storybook/react-native";
import { CheckboxGroup } from "./CheckboxGroup";
import { Checkbox } from "./Checkbox";
import { Text, View } from "react-native";

export const CheckboxDemo = () => {
  const [state, setCheckbox] = React.useState([]);

  const [isIndeterminate, setIsIndeterminate] = React.useState(true);

  const [isChecked, setIsChecked] = React.useState(false);
  const handleCheckboxChange = (isChecked: boolean) => {
    setIsChecked(isChecked);
    setIsIndeterminate(false);
  };
  return (
    <View> 
      <Text>----- Checkbox demo ----</Text>
      <Checkbox isIndeterminate={isIndeterminate} onChange={handleCheckboxChange}><Text>Checkbox isIndeterminate={isIndeterminate ? "true" : "false"}  isChecked={isChecked ? "true" : "false"} </Text></Checkbox>
      <Text>selected:{state}</Text>
      <CheckboxGroup
        label="Favorite sports"
        value={state}
        onChange={(val: any) => {
          console.log("onChange--------" + val)
          setCheckbox(val);
        }}>
        <Checkbox value="soccer">
          <Text>Soccer</Text>
        </Checkbox>
        <Checkbox value="baseball">
          <Text>Baseball</Text>
        </Checkbox>
        <Checkbox value="basketball">
          <Text>Basketball</Text>
        </Checkbox>
      </CheckboxGroup>
    </View>
  );
};
